<%- include('./layouts/header.ejs')%>

  <div class="main">
  <%- include('./layouts/navBar.ejs')%>
    <div class="container-fluid">
      <div class="page-title">
        <h1>编辑文章</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <form class="row" id="myForm">
        
      </form>
    </div>
  </div>

  <%- include('./layouts/aside.ejs')%>

  <%- include('./layouts/footer.ejs')%>
  <script type="text/template" id="postsInfoTmp">
    <div class="col-md-9">
          <div class="form-group">
            <label for="title">标题</label>
            <input id="title" class="form-control input-lg" value="{{posts.title}}" name="title" type="text" placeholder="文章标题">
          </div>
          <div class="form-group">
            <label for="content">内容</label>
            <textarea id="content" class="form-control input-lg"  name="content" cols="30" rows="10" placeholder="内容">{{posts.content}}</textarea>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="slug">别名</label>
            <input id="slug" class="form-control" value="{{posts.slug}}" name="slug" type="text" placeholder="slug">
            <p class="help-block">https://zce.me/post/<strong>slug</strong></p>
          </div>
          <div class="form-group">
            <label for="feature">特色图像</label>
            <!-- show when image chose -->
            {{if posts.feature}}
            <img class="help-block thumbnail" src="{{posts.feature}}">
            {{else}}
              <img class="help-block thumbnail" style="display: none">
            {{/if}}
            
            <input id="feature" class="form-control" name="feature" type="file">
          </div>
          <div class="form-group">
            <label for="category">所属分类</label>
            <select id="category" class="form-control" name="category">
              {{each categories as val key}}
              <option value="{{val.id}}" {{if posts.category_id==val.id}} selected {{/if}}>{{val.name}}</option>
              {{/each}}
            </select>
          </div>
          <div class="form-group">
            <label for="created">发布时间</label>
            <input id="created" class="form-control" value="{{posts.created.replace(" ","T")}}" name="created" type="datetime-local">
          </div>
          <div class="form-group">
            <label for="status">状态</label>
            <select id="status" class="form-control" name="status">
              <option value="drafted" {{if posts.status=='drafted'}}selected {{/if}}>草稿</option>
              <option value="published" {{if posts.status=='published'}}selected {{/if}}>已发布</option>
              <option value="published" {{if posts.status=='trashed'}}selected {{/if}}>回收站</option>
            </select>
          </div>
          <div class="form-group">
            <!-- <button class="btn btn-primary" type="submit">保存</button> -->
            <span class="btn btn-primary" id="btnUpdate">更新</span>
          </div>
        </div>
  </script>
  <script>
    // 0 先获取URL中的id
    var search = location.search.slice(1);// 可以获取URL地址栏中?之后的参数,包括问号
    // "?id=1030&name=tom&age=20"==>"id=1030&name=tom&age=20"
    var arr = search.split('&')
      // console.log(arr);
      var obj = {}
      for (var i = 0; i < arr.length; i++) {
        var temp = arr[i].split('=')
        obj[temp[0]] = temp[1]
        console.log(obj);
      }
      // {id:1033,name:'tom',age=20}
    // 1. 发请求获取当前id下面的数据，渲染在页面上
    $.ajax({
      type:'get',
      url:'/getPostsInfoById',
      data:{
        id:obj.id
      },
      dataType:'json',
      success:function(res){
        console.log(res);
        if(res&&res.code==0){
          // 要将返回来的数据，渲染在页面上
          // var  htmlStr = template('postsInfoTmp',res.posts);
          // 当前要把最外层的对象进行传递
          var  htmlStr = template('postsInfoTmp',res);
          $('#myForm').html(htmlStr)
        }
      }
    })
  </script>
